<template>
  <a-modal title="计量设备" :visible="dialogVisible" @ok="handleOk" @cancel="handleCancel" class="large-modal">
    <searchData :searchData="searchData" @search="search" @hasChildren="isHasChildren"></searchData>
    <b-table
      ref="table"
      bordered
      :columns="columns"
      :request="tableData"
      :selectConfig="{ use: true, type: 'checkbox', rowKey: 'id' }"
      @select-click="hanldeClick"
    >
      <span slot="num" slot-scope="text, record, index">{{ index + 1 }}</span>
      <template slot="actions" slot-scope="text, record">
        <a @click="detailsItem(record)">查看详情</a>
      </template>
    </b-table>
  </a-modal>
</template>
<script>
import BTable from '@/components/BComponents/BTable'
import { chooseDevicePage, getChooseOwnInfoProjectList } from '@/api/quality/meterageEquipmentAllocate'
import {columns, searchArr} from './index.js'
export default {
  name: 'detail-dialog',
  components: { BTable },
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    form: Object,
    searchArr: {
      type: [Array, Function],
      default: () => searchArr
    },
    columns: {
      type: Array,
      default: () => columns
    }
  },
  data() {
    return {
      selectedRows: null,
      hasChildren: true,
      queryParams: {},
      searchData: [],
      tableData: (parameter) => {
        let { pageNo, pageSize } = parameter;
        let  { mdInfoName, mdModelName, projectId } = this.form
        let params = {
          pageNum: pageNo,
          pageSize,
        };
        this.queryParams.mdInfoName = mdInfoName
        this.queryParams.mdModelName = mdModelName
        this.queryParams.projectId = projectId
        const requestParameters = Object.assign({}, params, { param: this.queryParams })
        //选中包含下级或者输入框未选中值的情况下传递此参数
        if(this.hasChildren || !requestParameters.param.searchQuery || requestParameters.param.searchQuery._checked == ''){
          requestParameters.param.permissionType = "1"
        }
        return chooseDevicePage(requestParameters).then((res) => {
          if (res.code === '0') {
            return { code: 200, data: res.data?.list, totalSize: res.data?.total }
          }
        })
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.$nextTick(() => {
            this.getUnitArr()
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取所在单位
    getUnitArr() {
      let params = {
        projectId: this.form.projectId,
        mdInfoName: this.form.mdInfoName,
        mdModelName: this.form.mdModelName,
      }
      getChooseOwnInfoProjectList(params).then(res => {
        if(res.data) {
          const unitArr = res.data.map(item => {
            return {
              value: item.projectId,
              label: item.projectName
            }
          })
          this.$set(this.form, 'unitArr', unitArr)
          this.searchData = searchArr(this.form)
        }
      })
    },
    isHasChildren(val) {
      this.hasChildren = val;
    },
    /**
     * @description: 多选项目
     **/
    hanldeClick(data) {
      this.selectedRows = data
    },
    /**
     * 表单取消
     **/
    handleCancel(e) {
      this.$emit('handelShow', false)
      this.selectedRows = null
    },
    handleOk: function() {
      if(!this.selectedRows?.rows?.length) {
        this.$message.info('请选择计量设备！')
        return
      }
      this.$emit('handleClick', this.selectedRows)
      this.$emit('handelShow', false)
      this.selectedRows = null
    },
    search(val) {
      this.queryParams = val || {}
      this.$refs.table.getData(null, true)
    },
    // 查看详情
    detailsItem(record) {
      this.$router.push({
          name: 'ownEquipmentLedgerInfo',
          query: {
            editModel: 0,
            isShowAllotRecord: true,
            isShowVerifRecord: true,
            id: record.id,
            businessId: this.$route.query.businessId,
            waitRecordId: this.$route.query.id,
          }
       })
    }
  }
}
</script>
